<template>
    <div class="bottom-bar">
        <div class="check-content">
            <check-button 
            :is-checked="isSelectAll" 
            class="check-button" @click.native="checkClick" />
            <span>全选</span>
        </div>

        <div class="totalPrice">
            合计:{{totalPrice}}
        </div>

        <div class="calculate" @click="calcClick">
            去计算({{checkLength}})
        </div>
    </div>
</template>


<script>
import checkButton from 'components/content/checkButton/CheckButton' //选中按钮

import { mapGetters} from 'vuex'

export default {
    name:'CartBottomBar',
    components:{
        checkButton
    },
    computed:{
        ...mapGetters(['cartList']),
        totalPrice(){
            return '￥' + this.cartList.filter(item => {
                return item.checked
            }).reduce((preValue,item) => {
                return preValue + item.price * item.count
            },0).toFixed(2)
        },
        checkLength(){
            return this.cartList.filter(item => item.checked).length
        },
        // 是否全部选中
        isSelectAll(){
            if(this.cartList.length == 0){
                return false
            }else{
                // 方法1.如果商品长度为0，返回false，否则当查找到没被选中的商品，返回false
                // return !this.cartList.find(item => !item.checked)
                // 方法2.当没有被选中的商品的长度为0时，返回true
                // return !(this.cartList.filter(item => !item.checked).length)

                // 方法3.遍历cartList，如果有没被选中的商品，返回false，没有则返回true
                for(let item of this.cartList){
                    if(!item.checked){
                        return false
                    }
                }

                return true
            }
        }
    },
    methods:{
        checkClick(){
            // 全部选中
            if(this.isSelectAll){
                this.cartList.forEach(item => item.checked = false)
            // 部分或全部不选中
            }else{
                this.cartList.forEach(item => item.checked = true)
            }
        },
        // 没有选中商品点击计算
        calcClick(){
            if(!this.checkLength){
                this.$toast.show('请选择购买的商品',2000)
            }
        }
    }
}
</script>


<style scoped>
    .bottom-bar {
        width: 100%;
        height: 40px;
        /* background-color: red; */
        position: fixed;
        bottom: 48px;
        line-height: 40px;
        display: flex;

        background-color: #eee;
    }

    .check-content {
        display: flex;
        align-items: center;
        margin-left: 10px;
        width: 60px;
        font-size: 14px;
    }

    .check-button {
        width: 20px;
        height: 20px;
        line-height: 20px;
        margin-right: 5px;
    }

    .totalPrice {
        margin-left: 20px;
        flex: 1;
        font-size: 14px;
    }

    .calculate {
        width: 90px;
        background-color: red;
        color: #fff;
        text-align: center;
        font-size: 14px;
    }
</style>